<template>
	<div class="footer">
		<ul class="tabBar">
			<li>
				<router-link to="Home">
					<img src="~imgs/home_23.gif"/>
					<p>主页</p>
				</router-link>
			</li>
			<li>
				<router-link to="Type">
					<img src="~imgs/home.gif"/>
					<p>分类</p>
				</router-link>
			</li>
			<li>
				<router-link to="ShopCar">
					<img src="~imgs/home_24.gif"/>
					<p>购物车</p>
				</router-link>
			</li>
			<li>
				<router-link to="User">
					<img src="~imgs/home_25.gif"/>
					<p>我的</p>
				</router-link>
			</li>
		</ul>
	</div>
</template>

<script>
	export default{
		
	}
</script>

<style lang="stylus" scoped>
	/*底部tabbar样式*/
	.footer
		width: 100%;
		position: fixed;
		bottom: 0;
		height: 1.2rem;
		z-index: 999;
		overflow: hidden;
	.tabBar
			width: 100%;
			margin-top: 0.2rem;
			display: flex;
			column-count: 4;
			height: 1rem;
			background: #5a9fe7;
			ul
				height: 1rem;
			li
				flex: 1;
				padding-top: 0.10rem
				float: left;
				text-align: center;
				height: 1rem;
				a
					width: 100%;
					height: 1rem;
					img
						width: 0.48rem;
						height: 0.44rem;
					p
						color: #fff !important;
						padding-top: 0.04rem;
						font-size: 0.24rem;
				.router-link-active::before
					content: "";
					position: absolute;
					display: block;
					top: 0;
					width: 25%;
					height: 0.2rem;
					background: url("~imgs/tab-bar-on.png") no-repeat;
					background-size: 100% 0.2rem;
</style>